<template>
  <div class="picker-model">
    <div class="picker-model-title">
      <div class="title mb5" v-if="showTitle">
        <span class="mr5"> {{ currentMode == 1 ? '图片' : '背景颜色' }} </span>
        <span class="tip-text" v-if="currentMode === 1">(至少上传{{ imgLimit }}张图片)</span>
        <span class="tip-text" v-else>(选择一种颜色)</span>
        <span class="ml20 switch-mode" @click="switchMode">
          <i class="el-icon-sort" style="transform: rotate(90deg);"></i>
          <a style="margin-left: 3px;"> {{ currentMode === 1 ? '使用纯色' : '使用背景图片' }} </a>
        </span>
        <span v-if="currentMode === 1" class="font_red bold font_size16 ml10">{{ tipText }}</span>
      </div>
      <div v-if="currentMode === 1">
        <UploadPhotos 
            :list="currentPhotoList" 
            @update:list="updatePhotoList" 
            :isUpload="isUpload" 
            :limit="maxLimit" 
            :disabled="delImg" 
        />
      </div>
      <div>
        <template v-if="currentMode === 2">
          <el-color-picker v-model="currentColor" color-format="hex" :disabled="pickerDisabled"></el-color-picker>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, reactive, nextTick, onMounted } from '@vue/composition-api'
import UploadPhotos from "@/components/commV2/UploadPhotos/index.vue"

// Props定义
const props = defineProps({
  isUpload: {
    type: Boolean,
    default: true
  },
  delImg: {
    type: Boolean,
    default: true
  },
  showTitle: {
    type: Boolean,
    default: true
  },
  // 模式 1: 图片模式, 2: 颜色模式
  mode: {
    type: [String, Number],
    default: 1
  },
  // 照片列表
  photoList: {
    type: Array,
    default: () => []
  },
  // 颜色值
  color: {
    type: String,
    default: '#409EFF'
  },
  // 提示文本
  tipText: {
    type: String,
    default: ''
  },
  // 是否禁用
  pickerDisabled: {
    type: Boolean,
    default: false
  },
  // 最少上传
  imgLimit: {
    type: Number,
    default: 2
  },
  // 最多上传
  maxLimit: {
    type: Number,
    default: 10
  }
})

// Emits定义
const emit = defineEmits(['modeChange', 'update:photoList', 'update:color', 'colorChange'])

// 响应式数据
const currentMode = ref(props.mode)
const currentPhotoList = ref([...props.photoList])
const currentColor = ref(props.color)

// 组件挂载后的调试
onMounted(() => { })

// 监听props变化
watch(() => props.mode, (newMode) => {
  currentMode.value = newMode
}, { immediate: true })

watch(() => props.photoList, (newList, oldList) => {
  if (Array.isArray(newList)) {
    currentPhotoList.value = [...newList]
  } else {
    currentPhotoList.value = []
  }
}, { immediate: true, deep: true })

watch(() => props.color, (newColor) => {
  currentColor.value = newColor
}, { immediate: true })


watch(() => currentColor.value, (newColor) => {
  emit('colorChange', newColor)
}, { immediate: true })

// 方法  1图片模式   2颜色模式
const switchMode = () => {
  const newMode = currentMode.value === 1 ? 2 : 1
  currentMode.value = newMode
  emit('modeChange', newMode)
}

const updatePhotoList = (newList) => {
  currentPhotoList.value = [...newList]
  emit('update:photoList', [...newList])
}

</script>

<style lang="scss" scoped>
.picker-model {
  line-height: 1.2 !important;
  .picker-model-title {
    .title {
      display: flex;
      align-items: center;

      .tip-text {
        color: #666;
        font-size: 14px;
      }

      .switch-mode {
        cursor: pointer;
        color: #409EFF;
        font-size: 14px;

        &:hover {
          text-decoration: underline;
        }
      }

      .ml20 {
        margin-left: 20px;
      }

      .ml10 {
        margin-left: 10px;
      }
    }
  }
}
</style>
